CSS Styles Shaded Tricolor div with HTML and CSS

Question

Ethan Karla · Answer

Yes, you can simply achieve it by linear gradient property of CSS. The linear-gradient() function sets a linear gradient as the background image.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Let's have a look on the below example : 
andlt;!DOCTYPE html>
andlt;html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
andlt;head>
and  and  andlt;meta charset='utf-8' />
and  and  andlt;title>Tricolor Flagandlt;/title>
and  and  andlt;style>
and  and  and  and  #grad1 {
and  and  and  and  and  and  height: 200px;
and  and  and  and  and  and  background-image: linear-gradient(orange, white, green);
and  and  and  and  }
and  and  andlt;/style>
andlt;/head>
andlt;body>
and  and  andlt;h3>Linear Gradient - Top to Bottomandlt;/h3>
and  and  andlt;div id='grad1'>andlt;/div>
and  and  andlt;p>andlt;strong>Note:andlt;/strong> Internet Explorer 9 and earlier versions do not support gradients.andlt;/p>
andlt;/body>
andlt;/html>
Hope this information will be helpful for you. 
Happy Coding!

forum

CSS Styles Shaded Tricolor div with HTML and CSS

Anonymous User

Can you answer this question?

1 Answers

Liked By